<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新增订单</title>
    <base>
    <link rel="stylesheet" type="text/css"
          href="../../../res/layui/css/layui.css" media="all">
    <style type="text/css">
        body {
            margin: 20px 0px;
        }

        .shuliang {
            margin: 0;
            padding: 0;
            border: 0 none;
        }

        .beiz {
            margin: 0;
            padding: 0;
            border: 0 none;
        }

        #goods {
            text-align: center;
            width: 800px;
        }

        .demoTable {
            margin: 0px 0px 0px 50px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>新增订单</legend>
</fieldset>
<form class="layui-form" id="form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">采购备注</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" id="remark" placeholder="采购备注" maxlength="80"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        经销商　
        <div class="layui-inline layui-form">
            <select name="supName" id="supName"
                    autocomplete="off" lay-filter='supName' class="layui-input">
                <option></option>
            </select>
        </div>
        <div class="layui-btn-group demoTable">
            <button type="button" class="layui-btn" id="add">一键全部添加</button>
        </div>
    </div>
</form>
<div class="layui-form">
    <table id="goods" class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col width="150">
            <col width="100">
            <col width="120">
            <col>
        </colgroup>
        <thead>
        <tr>
            <td>采购原材料名称</td>
            <td>物品重量(g)</td>
            <td>类型名称</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        </thead>
    </table>
</div>
<br/>
<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="materialName" id="materialName" autocomplete="off" placeholder="输入原材料关键字">
    </div>
    原材料类型：
    <div class="layui-inline layui-form">
        <select name="typeName" id="typeName" autocomplete="off" lay-filter='typeName' class="layui-input">
            <option></option>
        </select>
    </div>
    <div class="layui-input-inline" style="width: 100px;">
        <input type="number" id="priceMin" name="priceMin" onkeyup="priceMin()" placeholder="￥" autocomplete="off"
               class="layui-input">
    </div>
    -
    <div class="layui-input-inline" style="width: 100px;">
        <input type="number" id="priceMax" name="priceMax" onkeyup="priceMax()" placeholder="￥" autocomplete="off"
               class="layui-input">
    </div>
    <button class="layui-btn" id="sousuo" data-type="reload">搜索</button>
</div>
<table class="layui-table" id='cx' lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../../../res/layui/layui.js"></script>
<script src="../../../res/js/jquery-3.4.1.min.js"></script>
<script src="../../../res/js/util.js"></script>
<script>
    var arr = "";
    var array = new Array();
    var ids = null;

    //全选之后的删除。删除goods表格的数据
    function show(obj) {
        var oDivs = obj.parentNode.parentNode;
        //console.info(oDivs.firstChild.innerHTML);//删除的id
        $.each(array, function (index, item) {
            if (item === oDivs.firstChild.innerHTML) {
                array.splice(index, 1)
            }
        });
        obj.parentNode.parentNode.parentNode.removeChild(oDivs);
        table.reload('testRe');
    }

    // oninput="()"
    function keyPress() {
        var keyCode = event.keyCode;
        if ((keyCode >= 48 && keyCode <= 57)) {
            event.returnValue = true;
        } else {
            event.returnValue = false;
        }
    }

    layui.use(['form', 'laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
        layer = layui.layer //弹层
            , table = layui.table //表格
            , upload = layui.upload //上传
            , form = layui.form
            , element = layui.element; //元素操作

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.msg('切换了：' + this.innerHTML);
            console.log(data);
        });

        //执行一个 table 实例

        table.render({
            elem: '#cx'
            , url: getRootPath() + 'hqPurchaseorder/rawMaterialShowAll' //原材料显示
            , page: true //开启分页
            , method: 'post'
            , size: 'sm'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                //, {field: 'materialId', title: '原材料ID', width: 350, fixed: 'left', align: 'center'}
                //,{field: 'drugImg', title: '原材料图片', width:120,templet:'<div><img src="{{ d.drugImg}}"></div>'}
                , {field: 'typeName', title: '类型名称', width: 120, align: 'center'}
                , {field: 'materialName', title: '原材料名称', width: 150, align: 'center'}
                , {field: 'money', title: '价格', width: 120, align: 'center'}
            ]]
            , id: 'testRe'
            , parseData: function (res) {//res 即为原始返回的数据
                ids = res.data;
                for (var i in res.data) {
                    for (var j = 0; j < array.length; j++) {
                        if (array[j] === res.data[i].materialId) {
                            //如果set集合中有的话，给rows添加check属性选中
                            res.data[i]["LAY_CHECKED"] = true;
                        }
                    }
                }
                return {
                    "code": res.code, //解析接口状态
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });

        layui.use('table', function () {
            var table = layui.table;
            table.on('checkbox(test)', function (obj) {
                console.info(obj);
                // console.info(obj.parentNode.parentNode);
                // var oDivs = obj.parentNode.parentNode;
                // obj.parentNode.parentNode.parentNode.removeChild(oDivs);
                //得到id为goods的表格的数据
                var oCar = document.getElementById("goods");
                //全选
                if (obj.type == "all") {
                    //获取选中状态
                    if (obj.checked == true) {
                        var checkStatus = table.checkStatus('testRe')
                            , data = checkStatus.data;
                        for (let i = 0; i < data.length; i++) {
                            //删除全选之前的单选
                            $.each(array,function(index,item){
                            	if (data[i].materialId===item){
                                    array.splice(index, 1);
                                }
                            });
                            array.push(data[i].materialId);
                        }
                        //得到该表格的所有数据
                        var one = table.cache.testRe;
                        //得到id为goods的表格.得到该表格tr的值
                        var tr = oCar.getElementsByClassName("iii");
                        //得到tr的长度
                        var len = tr.length;
                        //判断当长度为0时，点击全选将数据全部加入进去
                        if (len == 0) {
                            //for 根据one 表格的长度循环  取数据
                            for (var i = 0; i < one.length; i++) {
                                //新增一个tr的节点
                                var oDiv = document.createElement("tr");
                                //设置tr的class为trs
                                oDiv.className = "trs";
                                //加入数据
                                oDiv.innerHTML += '<td style="display:none">' + one[i].materialId + '</td>'
                                oDiv.innerHTML += '<td class="iii">' + one[i].materialName + '</td>'

                                oDiv.innerHTML += '<td><input type="text" class="shuliang"  style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="6"></td>'

                                oDiv.innerHTML += '<td>' + one[i].typeName + '</td>'
                                oDiv.innerHTML += '<td>' + one[i].money + '</td>'
                                oDiv.innerHTML += '<td><a href="javascript:; " onclick="show(this)">删除</a></td>'
                                //将数据加入表格中
                                oCar.appendChild(oDiv);
                            }
                            //否则
                        } else {
                            //for 根据one 表格的长度循环 取数据
                            for (var i = 0; i < one.length; i++) {
                                //设置一个常量
                                var st = "";
                                //for 循环id为goods表格的数据
                                for (j = 0; j < len; j++) {
                                    //得到点击选中原材料的名字
                                    var ii = one[i].materialName;
                                    //得到表格id为goods原材料的名字
                                    var uu = tr[j].innerHTML;
                                    //判断当选中原材料的名字和goods表格中原材料名字为一致时
                                    if (ii == uu) {
                                        //将变量st添加 "已有该数据"；
                                        st = "已有该数据";
                                        //跳出循环
                                        break;
                                    }
                                }
                                //如果变量st等于 "已有该数据"，则提示已有该数据
                                if (st == "已有该数据") {
                                    //否则
                                    console.info('已有该数据');
                                } else {
                                    //新增一个tr的节点
                                    var oDiv = document.createElement("tr");
                                    //设置tr的class为trs
                                    oDiv.className = "trs";
                                    //加入数据
                                    oDiv.innerHTML += '<td style="display:none">' + one[i].materialId + '</td>'
                                    oDiv.innerHTML += '<td class="iii">' + one[i].materialName + '</td>'
                                    oDiv.innerHTML += '<td><input type="text" class="shuliang"  style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="6"></td>'

                                    oDiv.innerHTML += '<td>' + one[i].typeName + '</td>'
                                    oDiv.innerHTML += '<td>' + one[i].money + '</td>'
                                    oDiv.innerHTML += '<td><a href="javascript:; " onclick="show(this)">删除</a></td>'

                                    //将数据加入表格中
                                    oCar.appendChild(oDiv);
                                }
                            }
                        }
                    } else {
                        var auto = $('.trs');
                        $.each(auto, function (index, item) {
                            for (let j = 0; j < ids.length; j++) {
                                if (ids[j].materialId === item.firstChild.innerHTML) {
                                    item.remove();
                                }
                            }
                        }, "json");
                        for (let i = 0; i < ids.length; i++) {
                            for (let j = 0; j < array.length; j++) {
                                if (ids[i].materialId === array[j]) {
                                    array.splice(j, 1);
                                }
                            }
                        }
                    }
                    //单选
                } else if (obj.type == "one") {
                    //获取选中状态
                    if (obj.checked == true) {
                        //得到所在行所有键值
                        data = obj.data;
                        array.push(obj.data.materialId);
                        //得到id为goods的表格.得到该表格tr的值
                        var tr = oCar.getElementsByClassName("iii");
                        //得到tr的长度
                        var len = tr.length;
                        //判断当长度为0时，点击选中将数据全部加入进去
                        if (len == 0) {
                            //新增一个tr的节点
                            var oDiv = document.createElement("tr");
                            //设置tr的class为trs
                            oDiv.className = "trs";
                            //加入数据
                            oDiv.innerHTML += '<td style="display:none">' + data.materialId + '</td>'
                            oDiv.innerHTML += '<td class="iii">' + data.materialName + '</td>'
                            oDiv.innerHTML += '<td><input type="text" class="shuliang"  style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="6"></td>'

                            oDiv.innerHTML += '<td>' + data.typeName + '</td>'
                            oDiv.innerHTML += '<td>' + data.money + '</td>'
                            oDiv.innerHTML += '<td><a href="javascript:; " onclick="show(this)">删除</a></td>'
                            //将数据加入表格中
                            oCar.appendChild(oDiv);
                            //得到新加节点的最后的一个a标签的
                            /* var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
                              //当点击a标签时触发该事件
                              delBtn.onclick=function(){
                                  //将这个节点删除
                                  oCar.removeChild(oDiv);
                              } */
                        } else {
                            //for 循环id为goods表格的数据
                            for (i = 0; i < len; i++) {
                                //得到点击选中原材料的名字
                                var sj = tr[i].innerHTML;
                                //得到表格id为goods原材料的名字
                                var oo = data.materialName;
                                //设置一个变量
                                var st = "";
                                //判断当选中原材料的名字和goods表格中原材料名字为一致时
                                if (sj === oo) {
                                    //将变量st添加 "已有该数据"；
                                    st = "已有该数据";
                                    //跳出循环
                                    break;
                                }
                            }
                            //如果变量st等于 "已有该数据"，则提示已有该数据
                            if (st === "已有该数据") {
                                layer.msg('亲，你点击的原材料已经加入过了!!!', {
                                    icon: 5,
                                    time: 1500 //1秒关闭（如果不配置，默认是3秒）
                                }, function () {

                                });
                                //否则
                            } else {
                                //新增一个tr的节点
                                var oDiv = document.createElement("tr");
                                //设置tr的class为trs
                                oDiv.className = "trs";
                                //加入数据
                                oDiv.innerHTML += '<td style="display:none">' + data.materialId + '</td>'
                                oDiv.innerHTML += '<td class="iii">' + data.materialName + '</td>'
                                oDiv.innerHTML += '<td><input type="text" class="shuliang"  style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="6"></td>'
                                oDiv.innerHTML += '<td>' + data.typeName + '</td>'
                                oDiv.innerHTML += '<td>' + data.money + '</td>'
                                oDiv.innerHTML += '<td><a href="javascript:; " onclick="show(this)">删除</a></td>'
                                //将数据加入表格中
                                oCar.appendChild(oDiv);
                            }

                        }

                    } else {
                        var auto = $('.trs');
                        $.each(auto, function (index, item) {
                            if (obj.data.materialId === item.firstChild.innerHTML) {
                                item.remove();
                            }
                        }, "json");
                        for (let i = 0; i < array.length; i++) {
                            if (obj.data.materialId === array[i]) {
                                array.splice(i, 1);
                            }
                        }
                    }
                }
            });
            var $ = layui.$;
            //当点击一键添加的时候
            var s = 0;
            $('#add').on('click', function () {
                s++;
                if (s === 1) {
                    //得到订单表的采购备注
                    var remark = $("#remark").val();
                    //得到订单表的供应商id
                    var supId = $("#supName").val();
                    //得到goods表格的数据
                    var number = 0;
                    //设置一个数组
                    var arr = [];
                    //得到goods表格的数据
                    $("#goods tr").each(function () {
                        if (number > 0) {
                            var row = "";
                            var td = $(this).find("td");
                            row = {
                                "materialId": $(td[0]).text(),
                                "Count": $(td[2]).children().val(),
                                "Money": $(td[4]).text()
                            };
                            //将数据加入进去
                            arr.push(row);
                        }
                        number = number + 1;
                    });
                    //转换json数据
                    var arrs = JSON.stringify(arr);
                    var reg = new RegExp("^[0-9]*$");
                    var num = 0;
                    $.each(arr, function (index, item) {
                        if (!reg.test(item.Count) || item.Count == '') {
                            num = num + 1;
                        }
                    }, "json");
                    if (arrs == '[]') {
                        layer.msg('请添加至少一个原材料');
                        playMessage('请添加至少一个原材料');
                        s=0;
                    } else if (remark == "") {
                        layer.msg('请输入采购备注');s=0;
                        playMessage('请输入采购备注');
                    } else if (supId == "") {
                        layer.msg('请选择经销商');s=0;
                        playMessage('请选择经销商');
                    } else if (num > 0) {
                        layer.msg('请检查物品重量是否有误');s=0;
                        playMessage('请检查物品重量是否有误');
                    } else {
                        //通过ajax方式传入到后台
                        $.ajax({
                            url: getRootPath() + 'hqPurchaseorder/insert',
                            data: {"arr": arrs, "remark": remark, "supId": supId},
                            type: "post",
                            dataType: "json",
                            cache: false,
                            async: false,
                            success: function (res) {
                                playMessage(res.message)
                                if (res.status === 20) {
                                    parent.closeOpen(res.message);
                                } else {
                                    parent.closeOpen(res.message);
                                }
                            }
                        });
                    }
                }
            });
            //监听单元格编辑
            table.on('edit(demo)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                var fdItemNumber;
                var fdItemRemark;
                //当编辑的是重量时，判断它只能是数字
                if (field == "fdItemNumber") {
                    var reg = new RegExp("^[0-9]*$");
                    if (reg.test(value)) {
                        fdItemNumber = value;
                        fdItemRemark = data.fdItemRemark;
                    } else {
                        //提示只能输入数字
                        playMessage('输入的内容不能含有字母或文本');
                        layer.msg('输入的内容不能含有字母或文本', {
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            table.reload('testRe', {page: {curr: 1}});
                        });
                        return;
                    }
                    //判断是物品备注时
                } else if (field == "fdItemRemark") {
                    fdItemRemark = value;
                    fdItemNumber = data.fdItemNumber;
                }
                var fdPodId = data.fdPodId;
                var fdPrice = data.fdPrice;
                //通过ajax方法传入到后台
                $.ajax({
                    url: "../../FdPoBreakdown/update",
                    data: {
                        "fdPodId": fdPodId,
                        "fdPrice": fdPrice,
                        "fdItemRemark": fdItemRemark,
                        "fdItemNumber": fdItemNumber
                    },
                    type: "post",
                    dataType: "json",
                    cache: false,
                    async: false,
                    success: function (obj) {
                        //修改成功后刷新该表格
                        table.reload('testRe', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
            });
        });
        //条件查询
        var $ = layui.$;
        $.ajax({
            url: getRootPath() + 'hqPurchaseorder/showTypeName',
            data: null,
            dataType: 'json',
            async: false,//同步
            type: 'post',
            success: function (obj) {
                $.each(obj, function (index, item) {
                    $("#typeName").append("<option value=" + item + ">" + item + "</option>");
                })
                //渲染
                form.render('select');
            },
            error: function () {

            }
        })
        $.ajax({
            url: getRootPath() + 'hqPurchaseorder/showSupName',
            data: null,
            dataType: 'json',
            async: false,//同步
            type: 'post',
            success: function (obj) {
                $.each(obj, function (index, item) {
                    $("#supName").append("<option value=" + item.supId + ">" + item.supName + "</option>");
                })
                //渲染
                form.render('select');
            },
            error: function () {

            }
        })
        $('#sousuo').on('click', function () {
            //执行重载
            table.reload('testRe', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    materialName: $('#materialName').val(),
                    typeName: $("#typeName").val(),
                    mixMoney: $('#priceMin').val(),
                    maxMoney: $('#priceMax').val()
                }
            });
        });
    });
</script>
</body>
</html>